import {Alert, View, Text, Button, TextInput} from 'react-native';
import React, {Component} from 'react';
import {Tab} from '@rneui/themed';
import BaseForm from '../../../../components/elements/BaseForm';

export default class User extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      index: 0,
    };
    this.userInfoForm = React.createRef();
    this.save = this.save.bind(this);
  }

  componentDidMount() {
    let {route} = this.props;
    let name = route.params.name;
    this.setState({
      name: name,
    });
  }

  save() {
    Alert.alert('成功');
  }

  render() {
    const userInfoFormColumn = [
      {
        type: 'TextInput',
        field: 'name',
        title: '用户名',
        editable: false,
        required: true,
      },
      {
        type: 'TextInput',
        field: 'first_name',
        title: '姓',
        required: true,
        rules: {max: 2, min: 1},
        onValueChange: value => {
          let formData = this.userInfoForm.current.getFormData();
          formData.name =
            (formData.first_name === null ? '' : formData.first_name) +
            (formData.last_name === null ? '' : formData.last_name);
          this.userInfoForm.current.setFormData(formData);
        },
      },
      {
        type: 'TextInput',
        field: 'last_name',
        title: '名',
        required: true,
        rules: {max: 3, min: 1},
        onValueChange: value => {
          let formData = this.userInfoForm.current.getFormData();
          formData.name =
            (formData.first_name === null ? '' : formData.first_name) +
            (formData.last_name === null ? '' : formData.last_name);
          this.userInfoForm.current.setFormData(formData);
        },
      },
      {
        type: 'TextInput',
        field: 'mail',
        title: '邮箱',
        rules: {
          regex: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
          message: '邮箱格式不正确!',
        },
      },
      {
        type: 'TextInput',
        field: 'telephone',
        title: '电话',
      },
      {
        type: 'TextInput',
        field: 'phone',
        title: '手机',
        rules: {
          regex: /^1[3-9][0-9]{9}$/,
          message: '手机格式不正确!',
        },
      },
    ];
    const userOperation = [
      {
        text: '保存',
        style: {backgroundColor: 'red'},
        callback(p) {
          console.log(p);
        },
      },
    ];
    const passWordFormColumn = [
      {
        type: 'TextInput',
        field: 'account',
        title: '用户名',
        editable: false,
        required: true,
      },
      {
        type: 'TextInput',
        field: 'oldPassword',
        title: '旧密码',
        editable: true,
        required: true,
        security: true,
      },
      {
        type: 'TextInput',
        field: 'password',
        title: '新密码',
        editable: true,
        required: true,
        security: true,
      },
      {
        type: 'TextInput',
        field: 'rePassword',
        title: '确认密码',
        editable: true,
        required: true,
        security: true,
      },
    ];
    const passWordOperation = [
      {
        text: '保存',
        style: {backgroundColor: 'red'},
        callback(p) {
          console.log(p);
        },
      },
    ];
    return (
      <View
        style={{
          flexDirection: 'column',
          height: '100%',
          backgroundColor: '#fff',
        }}>
        <View>
          <Tab
            value={this.state.index}
            onChange={e => {
              this.setState({
                index: e,
              });
            }}
            indicatorStyle={{
              backgroundColor: '#2089dc',
            }}
            dense>
            <Tab.Item titleStyle={{color: '#2089dc'}}>基本信息</Tab.Item>
            <Tab.Item titleStyle={{color: '#2089dc'}}>安全设置</Tab.Item>
          </Tab>
        </View>
        <View style={{marginTop: '5%'}}>
          {this.state.index === 0 ? (
            <BaseForm
              ref={this.userInfoForm}
              formColumn={userInfoFormColumn}
              operation={userOperation}
            />
          ) : null}
          {this.state.index === 1 ? (
            <BaseForm
              ref={this.userInfoForm}
              formColumn={passWordFormColumn}
              operation={passWordOperation}
            />
          ) : null}
        </View>
      </View>
    );
  }
}
